/**
* @陈明阳
*/
<template>
	<!--引入element container布局：头、边、中心-->
	<el-container class="home_container">

		<!-- 头 -->
		<el-header>
			<span>U S U C</span>

			<div>
				<el-avatar :size="60" class="avatar" fit="" shape="circle">{{userName}}</el-avatar>
			</div>

			<el-button id="btnOut" type="info" @click="logout">安全退出</el-button>

		</el-header>

		<!-- 菜单栏 + 主体 -->
		<el-container>

			<!-- 菜单栏 -->
			<el-aside :width="iscollapse?'64px':'200px'">
				<!-- 侧边栏 -->
				<!-- 一级+二级 -->
				<!-- unique-opened 可以设置一级菜单是否单独显示 -->
				<el-menu background-color="#21252b" text-color="#fff" active-text-color="dodgerblue" :router="true" :default-active="activePath"
				 :collapse="iscollapse" :collapse-transition="false">

					<!-- 伸缩按钮 -->
					<div class="toggle-button" @click="toggleCollapase">|||</div> <!-- @click="toggleCollapase" -->

					<!-- 一级 -->
					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">

						<template slot="title">
							<i class="el-icon-location"></i> <span>{{item.title}}</span>
						</template>

						<!-- 二级 -->
						<el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savNavState(it.path)">
							<template solt="title">
								<i class="el-icon-location"></i> <span>{{it.title}}</span>
							</template>
						</el-menu-item>

					</el-submenu>

				</el-menu>
			</el-aside>

			<!-- 主体 -->
			<el-main>
				<router-view></router-view>
			</el-main>

		</el-container>


	</el-container>
</template>

<script>
	export default {

		data() {
			return {
				menuList: [], //菜单列表
				activePath: '/welcome', //默认路径
				iscollapse: false, //伸缩状态 默认不缩
				userName: "", //头像显示的用户名（即userId）
			}


		},

		//onload事件
		created() {
			//查询menuList方法
			this.getMenuList();
			//获取菜单路径
			this.activePath = window.sessionStorage.getItem('activePath'); //	取session里的path
			//获取头像名字方法
			this.getAvatarName();
		},

		methods: {
			//获取userId
			getAvatarName() {
				this.$data.userName = JSON.parse(window.sessionStorage.getItem('userInfo')).userId;
			},
			//安全退出方法
			logout() {
				window.sessionStorage.clear(); //清除session
				this.$router.push("/login"); //重置路由
			},
			//获取导航菜单方法
			async getMenuList() {
				const {
					data: ref_json
				} = await this.$http.get('menus');
				// console.log(ref_json);//这是json数据
				var res = JSON.parse(ref_json); //json转换为js对象
				// console.log(res);
				if (res.flag != 200) return this.$message.error("获取列表失败！");
				this.menuList = res.menus; //菜单列表
			},
			//伸缩按钮
			toggleCollapase() {
				this.iscollapse = !this.iscollapse;
			},
			//保存路径
			savNavState(activePath) {
				window.sessionStorage.setItem('activePath', activePath) //存入session
				this.activePath = activePath;
			},


		}

	}
</script>

<style scoped>
	.avatar {
		background-color: #000000;
		color: gold;
		margin-top: 14px;
		/* margin-left: 150px; */
		font-size: 20;
	}

	#btnOut {
		/* 安全退出按钮样式 */
		height: 45px;
		margin-top: 5px;
		color: dodgerblue;
		background-color: ghostwhite;
		font-weight: 700;
		font-size: 18px;
		border: 0;
		border-radius: 30px;
	}

	.home_container {
		/* 布满全屏 */
		height: 100%;
		margin-bottom: 40px;
	}

	/* 主体 */
	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
		margin: 0;
		padding: 0;
	}

	/* 侧边 */
	.el-aside {
		background-color: #282c35;
		color: #333;
		/* text-align: center; */
		line-height: 200px;

	}

	.el-menu {
		/* 调整菜单块右对齐 */
		border-right: none;
	}

	/* 头 */
	.el-header {

		background-color: #409EFF;
		color: #333;
		text-align: center;
		line-height: 60px;
		justify-content: space-between;
		font-size: 40px;
		/* 放大 */
		font-weight: 700;
		/* 加粗 */
		display: flex;

		align-items: center;

	}

	/* |||按钮 */
	.toggle-button {
		background-color: #282c35;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
